<template>
  <div class="digital_report_qr">
    <div class="digital_report_qr_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="itemViewOption"
        :search-key="searchKey"
        :request="request"
        :open-mune-children="openMuneChildren"
        :search-key-symbol="searchKeySymbol"
        :back-home-btn="backHomeBtn"
        :is-search-hide="isSearchHide"
        @select="menuChange"
        @fatherSelct="menuChangeFather"
      />
    </div>
    <div class="table_content">
      <table-common
        :menu-id="menuId"
        :filter-list="filterList"
        :is-show="isShow"
        :pagination="pagination"
        :layout="layout"
        :page-sizes="pageSizes"
        :is-search="isSearch"
      />
    </div>
  </div>
</template>

<script>
import CommonSliderBar from '@/components/CommonSliderBar';
import tableCommon from '@/components/tableCommon/index.vue';
import { getByMenuComponent } from '@/api/componentLibrary/index.js';

export default {
  components: {
    CommonSliderBar,
    tableCommon
  },
  data() {
    return {
      menuId: undefined,
      filterList: [],
      request: {},
      itemViewOption: {},
      searchKey: '',
      openMuneChildren: true,
      isShow: true,
      reportFilterList: [],
      searchKeySymbol: '',
      menuBottom: false,
      pagination: true,
      layout: '',
      pageSizes: [],
      menuIdBefore: undefined,
      isSearch: true,
      backHomeBtn: true,
      isSearchHide: true
    };
  },
  async created() {
    await this.getConponentsInfo();
    // this.getSearchData();
    this.init();
  },
  methods: {
    async getConponentsInfo() {
      const { query: { menuId }} = this.$route;
      const obj = {
        menuId,
        value: '/TempletePage/index.vue'
      };
      const { data, success } = await getByMenuComponent(obj);
      if (success) {
        data.forEach(item => {
          // 后期得改成其他字段判断,componentMemo
          if (item.componentMemo === '侧边栏') {
            const { request, itemViewOption, searchKey, openMuneChildren, searchKeySymbol, backHomeBtn, isSearchHide } = item.content;
            this.request = request;
            this.itemViewOption = itemViewOption;
            this.searchKey = searchKey || '';
            openMuneChildren === false ? this.openMuneChildren = openMuneChildren : this.openMuneChildren = true;
            backHomeBtn === false ? this.backHomeBtn = backHomeBtn : this.backHomeBtn = true;
            isSearchHide === false ? this.isSearchHide = isSearchHide : this.isSearchHide = true;
            this.searchKeySymbol = searchKeySymbol || '';
          } else if (item.componentMemo === '报表') {
            const { menuId, isShow, filterList, menuBottom, layout, pageSizes, pagination, isSearch } = item.content;
            this.menuIdBefore = menuId;
            isShow === false ? this.isShow = isShow : this.isShow = true;
            isSearch === false ? this.isSearch = isSearch : this.isSearch = true;
            this.reportFilterList = filterList || [];
            this.menuBottom = menuBottom || false;
            this.layout = layout || 'prev, pager, next, sizes, jumper';
            this.pageSizes = pageSizes || [100, 200, 300];
            this.pagination = pagination || true;
          }
        });
      }
    },
    init() {
      this.$nextTick(() => {
        this.$refs.silderBar.send();
      });
    },
    menuChange(obj) {
      const { value } = obj;
      // this.getProjectData(value);
      this.getProjectDataTwoLevel(value);
    },
    menuChangeFather(obj) {
      const { value } = obj;
      this.getProjectData(value);
    },
    getProjectData(value) {
      !this.menuBottom ? this.getProjectDataTwoLevel(value) : undefined;
    },
    async getProjectDataTwoLevel(value) {
      const filterList = [];
      this.reportFilterList.forEach(item => {
        filterList.push({
          col: item.col,
          symbol: item.symbol || '',
          value: value[item.value]
        });
      });
      !this.menuId && (this.menuId = this.menuIdBefore);
      this.filterList = filterList;
    }

  }
};
</script>

<style lang='scss' scoped>
  .digital_report_qr{
    height: 100%;
    display: flex;
    .digital_report_qr_left{
      width: 16%;
      // height: calc(100% - 75px);
      background: #ffffff;
    }
    .table_content {
      height: 100%;
      flex: 1;
      padding:  10px;
      width: 84%;
    }
  }
</style>
